<template>
	<view class="container">
		<!-- （左）一级标题栏 -->
		<scroll-view scroll-y class="category-first">
			<view v-for="item in category.flist" class="f-item" :class="{active: item.id === category.currentId}"
				@click="tabtap(item)" :key="item.id">
				{{item.name}}
			</view>
		</scroll-view>

		<!-- （右）二级标题栏 -->
		<scroll-view scroll-y scroll-with-animation class="category-second" @scroll="asideScroll"
			:scroll-top="category.tabScrollTop">
			<view v-for="item in category.slist" :key="item.id" class="s-list" :id="'main-'+item.id">
				<text class="s-item">{{item.name}}</text>

				<!-- 三级标题栏 -->
				<view class="t-list">
					<template v-for="titem in category.tlist" :key="titem.id">
						<view @click="navToList(item.id,titem.id)" class="t-item" v-if="item.id == titem.pid">
							<image :src="titem.picture" mode=""></image>
							<text>{{titem.name}}</text>
						</view>
					</template>
				</view>
			</view>
			<view class="emptBox">

			</view>
		</scroll-view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import datas from "@/Json.js";
	import {
		onLoad
	} from "@dcloudio/uni-app"
	// category类别数据
	const category = ref({
		sizeCalcState: false, //计算状态
		tabScrollTop: 0, //当前category-second二级标题栏位置
		currentId: 1, //当前选中id

		flist: [], //一级标题数据
		slist: [], //二级标题数据
		tlist: [], //三级标题数据
		fid: 0 // 首页点击一级标题记录信息
	});
	onLoad((options) => {
		category.value.fid = options.fid;
		if (options.fid) {
			category.value.currentId = Number(options.fid);
		}
		let classify = datas.cateList;
		classify.forEach(item => {
			if (!item.pid) {
				category.value.flist.push(item); //pid为父级id, 没有pid或者pid=0是一级分类
			} else if (!item.picture) {
				category.value.slist.push(item); //没有图的是2级分类
			} else {
				category.value.tlist.push(item); //3级分类
			}
		})
	})
	// 初始
	let timer = setInterval(() => {
		tabtap(category.value.flist[category.value.currentId - 1])
		if(category.value.slist[0].top != undefined){
				clearInterval(timer)
		}
	}, 100);
	let timers = setTimeout(()=>{
		clearInterval(timer);
		clearTimeout(timers);
	},3000);
	
	//一级分类点击
	function tabtap(item) {
		if (!category.value.sizeCalcState) {
			calcSize();
		}
		category.value.currentId = item.id;
		let index = category.value.slist.findIndex(sitem => sitem.pid === item.id);
		category.value.tabScrollTop = category.value.slist[index].top == undefined ? 0 : category.value.slist[index].top + 2;
	}
	//右侧栏滚动
	function asideScroll(e) {
		if (!category.value.sizeCalcState) {
			calcSize();
		}
		// detail 获取细节信息
		let scrollTop = e.detail.scrollTop;
		let tabs = category.value.slist.filter(item => item.top <= scrollTop).reverse();
		// 将滚动与一级标题样式绑定 reverse() tabs[0]
		if (tabs.length > 0) {
			category.value.currentId = tabs[0].pid;
		}
	}
	//计算右侧栏每个tab的高度等信息
	function calcSize() {
		let h = 0;
		category.value.slist.forEach(item => {
			// 查找节点
			let view = uni.createSelectorQuery().select("#main-" + item.id);
			// 获取节点的相关信息
			view.fields({
				// 是否返回节点尺寸
				size: true
			}, data => {
				// top 节点的上边界坐标
				item.top = h;
				// height 节点的高度
				h += data.height;
				// bottom 节点的下边界坐标
				item.bottom = h;
			}).exec();
		})
		category.value.sizeCalcState = true;
	}
	// 页面跳转到商品页
	function navToList(sid, tid) {
		uni.navigateTo({
			url: `/pages/product/list?fid=${category.value.currentId}&sid=${sid}&tid=${tid}`
		})
	}
</script>

<style lang="scss">
	// page 等效于主体节点
	page,
	.container {
		height: 100%;
		background-color: #f8f8f8;
	}

	.container {
		display: flex;
		height: 100%;
		background-color: #f8f8f8;
	}

	.category-first {
		flex-shrink: 0;
		width: 200rpx;
		height: 100%;
		background-color: #fff;
	}

	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100rpx;
		font-size: 28rpx;
		color: $font-color-base;
		position: relative;

		// 链接点击一级标签选中样式
		&.active {
			color: $base-color;
			background: #f8f8f8;

			// 链接选中的伪类样式
			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36rpx;
				width: 8rpx;
				background-color: $base-color;
				border-radius: 0 4px 4px 0;
				opacity: .8;
			}
		}
	}

	.category-second {
		flex: 1;
		overflow: hidden;
		padding-left: 20rpx;
	}

	.s-item {
		display: flex;
		align-items: center;
		height: 70rpx;
		padding-top: 8rpx;
		font-size: 28rpx;
		color: $font-color-dark;
	}

	.t-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: #fff;
		padding-top: 12rpx;

		&:after {
			content: '';
			flex: 1;
			height: 0;
		}
	}

	.emptBox {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0);
	}

	.t-item {
		// flex-shrink 收缩值
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 176rpx;
		font-size: 26rpx;
		color: #666;
		padding-bottom: 20rpx;

		image {
			width: 140rpx;
			height: 140rpx;
		}
	}

	.s-list {
		border-bottom: #666 solid 1rpx;
		box-sizing: border-box;
	}
</style>